<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>绑定事件监听器</title>
        <style type="text/css">
            .outer,
            .middle,
            .inner {
                display: block;
                border: 1px solid transparent ;
                min-height: 50px;
                margin: 25px;
            }

            .outer {border-color: gray;}
            .middle {border-color: red;}
            .inner {border-color: blue;}
        </style>
    </head>
    <body>

        <div class="outer">
            <div class="middle">
                <a class="inner" href="http://www.kaifamiao.com" target="_blank">开发喵</a>
            </div>
        </div>

        <script type="text/javascript">
        ( function(){
            const outer = document.querySelector( '.outer' );
            const middle = document.querySelector( '.middle' );
            const inner = document.querySelector( '.inner' );

            const type = 'click' ;

            const listener = function(e){
                e.preventDefault();
                console.log( e.target , this );
            }

            const options = {
                // capture 表示 listener 会在事件流的哪个阶段被调用
                // true 表示在事件捕获阶段调用 listener
                // false 表示在事件冒泡阶段调用 listener
                capture: true ,
                // once 表示 listener 仅被调用一次
                // true 表示仅调用一次（一次调用之后会自动移除该监听器）
                // false 表示可以多次被调用（即每次调用后不会自动移除该监听器）
                once: true ,
                // 设置为 true 时，表示 listener 永远不会调用 preventDefault()
                passive : true
            }

            outer.addEventListener( type , listener , options );
            middle.addEventListener( type , listener , options );
            inner.addEventListener( type , listener , options );
        } )();
        </script>
        
    </body>
</html>